﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>弹出层曲线显示范围</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap-datetimepicker.min.css" />
    <link rel="stylesheet" type="text/css" href="../../../static/bootstrap-3.3.7/css/bootstrap-slider.min.css" />

    <script type="text/javascript" src="../../../static/js/jquery-2.1.3.min.js"></script>
    <script type="text/javascript" src="../../../static/js/jquery.cookie.js"></script>

    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/moment-with-locales.js"></script>
    <script type="text/javascript" src="../../../static/bootstrap-3.3.7/js/bootstrap-slider.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script type="text/javascript" src="../../../static/js/utils/CommonUtils.js"></script>
    <!-- 自定义css-->
    <link rel="stylesheet" type="text/css" href="../../../static/css/layer/middle_curveRangeLayer.css"/>
    <!--自定义js-->
    <script src="../../../static/js/layer/middle_curveRangeLayer.js" type="text/javascript"></script>
</head>

<script type="text/javascript">
    $(function () {
        //url请求参数集合
        window.RequestUrl = getUrlRequest();
        var labcode = RequestUrl["labcode"];//实验室编码
        if(labcode==""){
            labcode= $.cookie('labcode');
        }
        var primarykey = RequestUrl["primarykey"];//primarykey
        if(primarykey==""){
            primarykey=$.cookie('primarykey');
        }
        var testunitno = RequestUrl["testunitno"];//台位号
        if(testunitno==""){
            testunitno=primarykey.substring(primarykey.length()-2);
        }
        //设置铭牌信息
        //setMataData(labcode,testunitno);

        //使用JQuery方式调用bootstrap-slider
        $("#topXBar").slider();
        $("#topXBar").on("slide", function(slideEvt) {
            $("#topXlimit").val(slideEvt.value);
        });
        $("#bottomXBar").slider();
        $("#bottomXBar").on("slide", function(slideEvt) {
            $("#bottomXlimit").val(slideEvt.value);
        });
        //添加自定义的拖动条样式
        $(".slider").addClass("customSlider");
    })
</script>

<body>
<!--曲线显示范围显示区域,-->
<div class="curveRange-Content">

    <div id="curveXRange" class="curveXRange">
        <div class="input-group inputgrouptop">
            <span class="input-group-addon">上限</span>
            <input id="topXlimit" type="text" class="form-control" placeholder="单位为:min" onkeyup="value=value.replace(/[^\d]/g,'')">
            <input id="topXBar" type="text" data-slider-min="0" data-slider-max="22220" data-slider-step="1" data-slider-value="3"/>
        </div>


        <div class="input-group inputgrouptop">
            <span class="input-group-addon">下限</span>
            <input id="bottomXlimit" type="text" class="form-control" placeholder="单位为:min" onkeyup="value=value.replace(/[^\d]/g,'')">
            <input id="bottomXBar" type="text" data-slider-min="0" data-slider-max="22220" data-slider-step="1" data-slider-value="3"/>
        </div>

    </div>
    <br>
    <div id="curveXRangeButton" class="curveXRangeButton">
        <input class="btn btn-info btn-default"  value="确定" onclick="changeXAxisValue()">
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input class="btn btn-info btn-default"  value="取消" onclick="cancelCurveRangeLayer()">
    </div>
</div>

</body>
</html>
